import { createApp, h, nextTick } from 'vue';
import { TableProps } from 'ant-design-vue';

type ColumnType = Exclude<TableProps['columns'], undefined>[number];

export function handleCustomRender(
  fn: Function,
  params: Record<string, any>,
): ColumnType['customRender'] {
  return function customRender(opt) {
    return fn.call(null, { ...opt, ...params });
  };
}

/**
 * 计算元素宽度
 * @param innerHtml
 * @returns
 */
export const getWidth = (inner: any): number => {
  if (!inner) return 0;
  const html = document.createElement('span');
  html.style.fontSize = '16px';
  html.innerText = inner;
  html.className = '__getTextWidth';
  document.querySelector('body')?.appendChild(html);
  const width = document.querySelector('.__getTextWidth')?.offsetWidth;
  document.querySelector('.__getTextWidth')?.remove();
  return width + 40 || 0;
};
